<template>
  <div class="batch-booking-area">
    <div class="middle">
      <bread-crumb class="bread-crumb-padding" :list="breadCrumb"></bread-crumb>
      <div class="flx-row-bw-s">
        <div class="left-area">
          <Spin :withIcon="true" v-if="loading"></Spin>
          <template v-if="exist != null && exist">
            <div class="top-area">
              <h3 class="title">{{ title }}</h3>
              <div class="flx-row-c-c w-p-100">
                <span class="f-14 c-g" style="margin-right: 20px"
                  >发布时间：{{ releaseTime }}</span
                >
                <span class="f-14 c-g">浏览次数：{{ views }}</span>
              </div>
            </div>
            <div class="ql-snow">
              <div v-html="content" class="detail-area ql-editor"></div>
            </div>
            <div class="bottom-area flx-row-bw-c">
              <router-link :to="`/newsd?id=${last.id}`" v-if="last"
                >上一篇：{{ last.title }}</router-link
              >
              <router-link :to="`/newsd?id=${next.id}`" v-if="next"
                >下一篇：{{ next.title }}</router-link
              >
            </div>
          </template>
          <Empty-State
            style="background-color: #fff"
            v-if="exist != null && !exist"
            content="资讯不存在！"
          ></Empty-State>
        </div>
        <div class="news-right-area">
          <div class="box" style="margin-bottom: 24px">
            <div class="flx-row-bw-c title-top">
              <span class="f-16 c-d2">阅读排序榜</span>
              <div class="select-area flx-row-s-c">
                <div
                  class="item"
                  :class="[
                    rankingListSelect == 0 ? 'item-active' : 'item-normal',
                  ]"
                  @click="changeRankingSelect(0)"
                >
                  周
                </div>
                <div
                  class="item"
                  :class="[
                    rankingListSelect == 1 ? 'item-active' : 'item-normal',
                  ]"
                  @click="changeRankingSelect(1)"
                >
                  月
                </div>
              </div>
            </div>
            <div class="list-bottom">
              <div
                class="item flx-row-s-c"
                v-for="(item, index) in rankingList"
                :key="index"
                @click="toDetail(item.id)"
              >
                <div class="list-index" :class="[index < 3 ? 'top' : 'bottom']">
                  {{ index + 1 }}
                </div>
                <span>{{ item.title }}</span>
              </div>
            </div>
          </div>
          <div class="box">
            <div class="flx-row-bw-c title-top">
              <span class="f-16 c-d2">相关推荐</span>
            </div>
            <div class="list-bottom">
              <div
                class="item flx-row-s-c"
                v-for="(item, index) in recommendList"
                :key="index"
                @click="toDetail(item.id)"
              >
                <span>{{ item.title }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getNewsRanking, getNewsRecommend, getNewsDetail } from "@/api/data";
export default {
  data() {
    return {
      loading: false,
      breadCrumb: [{ name: "新闻资讯", to: "/newsl?tab=0" }],
      exist: null,

      // 内容
      title: "",
      releaseTime: "",
      content: "",
      views: "",
      last: null,
      next: null,

      // 右侧栏信息
      rankingListSelect: 0,
      rankingList: [],
      recommendList: [],
    };
  },
  watch: {
    "$route.query.id": {
      immediate: true,
      handler() {
        this.getNewsDetail();
        this.$nextTick(() => {
          window.scrollTo(0, 0);
        });
      },
    },
  },
  created() {
    this.getNewsRanking();
    this.getNewsRecommend();
  },
  methods: {
    // 获取详情
    async getNewsDetail() {
      this.loading = true;
      if (!this.$route.query.id || isNaN(this.$route.query.id)) {
        this.exist = false;
        return;
      }
      let res = await getNewsDetail(this.$route.query.id);
      if (res.code == 200) {
        this.exist = true;
        this.title = res.data.title;
        this.releaseTime = res.data.releaseTime;
        this.content = res.data.content;
        this.views = res.data.views;
        this.last = res.data.preConsult;
        this.next = res.data.nextConsult;
        document.title = `${res.data.title} - 新闻详情 - 190.vip`;
      } else {
        this.exist = false;
      }
      this.loading = false;
    },
    changeRankingSelect(index) {
      if (this.rankingListSelect == index) return;
      this.rankingListSelect = index;
      this.getNewsRanking();
    },
    // 跳转到详情
    toDetail(id) {
      this.$router.push({
        name: "newsd",
        query: {
          id: id,
        },
      });
    },
    // 获取阅读排行榜
    async getNewsRanking() {
      let res = await getNewsRanking({
        dateType: this.rankingListSelect,
      });
      if (res.code == 200) {
        this.rankingList = res.data;
      }
    },
    // 获取阅读推荐
    async getNewsRecommend() {
      let res = await getNewsRecommend();
      if (res.code == 200) {
        this.recommendList = res.data;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.batch-booking-area {
  background-color: #f7f7f7;
  padding-bottom: 20px;

  .left-area {
    min-height: 400px;
    width: 828px;
    padding: 14px 20px 0;
    background-color: #fff;
    position: relative;
    box-shadow: 0px 0px 11px 2px rgba(0, 16, 36, 0.02);

    .top-area {
      border-bottom: #dcdcdc solid 1px;
      padding: 22px 30px;
      width: 100%;

      .title {
        text-align: center;
        font-size: 22px;
        color: #1b1b1b;
        margin-bottom: 20px;
        word-break: break-all;
      }
    }
    .detail-area {
      min-height: 300px;
      padding: 35px 0;
    }
    .bottom-area {
      border-top: #dcdcdc solid 1px;
      height: 75px;
      font-size: 14px;

      span {
        width: 280px;
        @include f-ell-sin;
        @include h-c(null, null, #585858, #f9521f);
        cursor: pointer;
      }
    }
  }
  .news-right-area {
    width: 348px;

    .box {
      background-color: #fff;
      box-shadow: 0px 0px 11px 2px rgba(0, 16, 36, 0.02);

      .title-top {
        padding: 0 24px;
        height: 55px;
        border-bottom: #f9521f solid 1px;

        .select-area {
          background-color: #eeeeee;
          border-radius: 8px;

          .item {
            @include size(34px, 30px);
            text-align: center;
            line-height: 30px;
            font-size: 14px;
            border-radius: 8px;
          }
          .item-active {
            background-color: #f9521f;
            color: #fff;
          }
          .item-normal {
            @include h-c(#eeeeee, null, #898989, #f9521f);
            cursor: pointer;
          }
        }
      }

      .list-bottom {
        padding: 0 24px 36px;
        background-color: #fff;

        .item {
          border-bottom: #001024;
          height: 58px;
          font-size: 14px;
          border-bottom: #dcdcdc solid 1px;
          cursor: pointer;

          .list-index {
            @include size(34px);
            border-radius: 50%;
            color: #fff;
            margin-right: 25px;
            flex-shrink: 0;
            text-align: center;
            line-height: 34px;
            &.top {
              background-color: #f9521f;
            }
            &.bottom {
              background-color: #5b5b5b;
            }
          }
          span {
            width: 100%;
            @include f-ell-sin;
            color: #1b1b1b;
            transition: color 0.3s;
          }
          &:hover span {
            color: #f9521f;
          }
        }
      }
    }
  }
}
</style>